<template>
    <div class="m-menu">
        <dl
        class="nav"
        @mouseleave="mouseleave">
            <dt>全部分类</dt>
            <dd
            v-for="(item,index) in menu"
            :key="index"
            @mouseenter="enter">
            <i :class="item.type"/>{{item.name}}<span class="arrow"/>
            </dd>
        </dl>
        <!-- 菜单的详细部分 这里要使用模板循环，
        不同的分类展示不同的内容,鼠标移出时kind为空则不显示，
        鼠标移入时判断获取到节点里的type标签里的class赋值给kind,
        kind与type进行对比相同就显示数组里的内容-->
        <div
        v-if="kind"
        class="detail"
        @mouseenter="sover"
        @mouseleave="sout">
            <template
                v-for="(item,indx) in curdetail.child">
                <h4 :key="indx">{{ item.title }}</h4>
                <span
                v-for="v in item.child"
                :key="v">{{ v }}</span>
            </template>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 需要一个状态kind来记录鼠标hover时对应的菜单类别
            kind: '',
            menu: [{
                type: 'food',
                name: '美食',
                child: [{
                    title: '美食',
                    child: ['代金券', '甜点饮品', '火锅', '自助餐', '小吃快餐']
                }]
            }, {
                type: 'takeout',
                name: '外卖',
                child: [{
                    title: '外卖',
                    child: ['美团外卖']
                }]
            }, {
                type: 'hotel',
                name: '酒店',
                child: [{
                    title: '酒店星级',
                    child: ['经济型', '舒适/三星', '高档/四星', '豪华/五星']
                }]
            }]
        }
    },
    // 创建一个计算属性来判断鼠标hover时获取到的kind和数组里的type一样时返回数组里的列表数据
    computed: {
        curdetail: function () {
            return this.menu.filter(item => item.type === this.kind)[0]
        }
    },
    methods: {
        // 在鼠标离开dl时设立一个延迟的效果
        mouseleave: function () {
            const self = this
            self._timer = setTimeout(function () {
                self.kind = ''
            }, 150)
        },
        // 鼠标进入时获取i标签的className赋值给kind以用来跟与数组的type比较
        enter: function (e) {
            this.kind = e.target.querySelector('i').className
        },
        sover: function () {
            clearTimeout(this._timer)
        },
        // 鼠标移出详细内容部分时清除掉kind里的值，这样可以让详细内容消失
        sout: function () {
            this.kind = ''
        }
    }
}
</script>

<style>

</style>
